import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { useRequest } from '@umijs/hooks';
import { Avatar, Dropdown, Menu, message } from 'antd';
import React, { useState,useEffect } from 'react';
import { useHistory } from 'react-router';
import { fetchRequest, logoutFetch } from '../../../utils/Request';
import { url } from '../../../utils/url';
import './index.less'; //
import {IconFonts} from '../../../utils/Iconfont';
import watermark from 'watermark-dom'
var dayjs = require('dayjs')

export default function UserInfo(props: any) {




    const history = useHistory()


    //点击菜单栏的时候
    function onMenuClick(value: any) {
        // console.log(value);
        switch (value.key) {
            case "center":
                history.push("/homepage")
                break;
            case "settings":
                changePassword();
                break;

            case "logout":
                logout();
                break;
        }
    }

    const [name, setname] = useState("")
    const [phone, setPhone] = useState("")
    const [timeDate, setTimeDate] = useState("")

    const waterConfig = { 
        watermark_txt: `${name} ${phone}`,
        watermark_rows:2,
        watermark_width:150,
        
 }
    async function getNameRequest() {
        try {
            const json = await fetchRequest(url.GET_LOGIN_NAME, "");
            if (json.success) {
                setname(json.name)
                setPhone(json.phone)
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    useEffect(() => {
        if(name)
        {
            console.log(phone);
            
            watermark.load(waterConfig)   
        }
    }, [name,phone])

    const getName = useRequest(getNameRequest, {
        loadingDelay: 200
    })



    //退出登录的操作
    function logout() {
        //TODO 后续进行退出的网络请求
        // fetchRequest(url.GET_IMAGE_CODE)
        logoutFetch(url.LOGOUT_URL)
        watermark.load({ watermark_txt: ' ' }) 
        history.push("/")
       
    }

    //修改密码的操作

    function changePassword() {
        history.push("/changePassword")
    }
    //  获取年月日时间
    setInterval(function () {
        var date = new Date();//获取的是时间戳形式
        setTimeDate(`${date.getMonth() + 1}月${date.getDate()}日 周${'日一二三四五六'.charAt(date.getDay())} ${date.getHours()}:${date.getMinutes()}`)
    }, 1000)
    useEffect(()=>{},[timeDate])
    const menuHeaderDropdown = (
        <Menu className={"menu"} selectedKeys={[]} onClick={onMenuClick}>
            {/*{props.menu && (*/}
            {/*    <Menu.Item key="center">*/}
            {/*        <UserOutlined />*/}
            {/*        个人中心*/}
            {/*    </Menu.Item>*/}
            {/*)}*/}
            {/* {props.menu && (
                <Menu.Item key="settings">
                    <SettingOutlined />
                    个人设置
            </Menu.Item>
            )} */}

            {props.menu && (
                <Menu.Item key="settings">
                    <SettingOutlined />
                    修改密码
                </Menu.Item>
            )}
            {props.menu && <Menu.Divider />}

            <Menu.Item key="logout">
                <LogoutOutlined />
                退出登录
            </Menu.Item>
        </Menu>
    );
    return (
        <Dropdown overlay={menuHeaderDropdown}>

            <span className={"action account"}>
                <span className='time' style={{marginRight:'48px'}}>
                <IconFonts type="icon-rili1" style={{marginRight:'19px'}}></IconFonts>
                    {timeDate}
                </span>
                <Avatar size="small" src={require('../../../images/avater.png')} className={"avater"} alt="avatar" />
                <span className={"name"} style={{ marginLeft: '4px' }}>{name}</span>
            </span>
        </Dropdown>
    )
}
